<!--
 * @LastEditors: caiwenqi
 * @EditorsDescripttion: 老带新关系链页面
 * @LastEditTime: 2020-08-13 15:39:16
-->

<template>
    <div>
        <page-title :title="ruleTitle" :backUrl="backUrl"></page-title>
        <div class="oldBringsNewChainWrap" ref="ele">
            <div class="listTitle" v-if="oldCustomer">
                <div class="leftPoint"></div>
                <div class="titleName">来自老客推荐</div>
            </div>    
            <div class="newRegisterItems" v-if="oldCustomer">
                <div class="custName">{{oldCustomer.name}}</div>
                <div class="custNo">客户编号：{{oldCustomer.customerNo}}</div>
            </div>
            <div class="listTitle">
                <div class="leftPoint"></div>
                <div class="titleName">带来的新客注册</div>
            </div>
            <mt-loadmore id='refresh' 
            :autoFill="false" 
            :bottom-method="loadBottom"
            :bottom-distance="bottomDistance"
            :bottom-all-loaded="allLoaded" 
            ref="allLoadMore"  v-if="newCustomer">
                <ul class="newRegister" 
                v-if="newCustomer.length>0"
                
                >
                <!--// v-infinite-scroll="loadMore"
                // infinite-scroll-disabled="busy"
                // infinite-scroll-immediate-check="true"
                :bottomDistance="30"
                // infinite-scroll-distance="20"-->
                    <li v-for="(item,index) in newCustomer" :key=index>
                        <div class="custName">{{item.name}}</div>
                        <div class="custNo">客户编号：{{item.customerNo}}</div>
                    </li>
                </ul>
                <ul class="newRegister" v-else>
                    <li class="noData">
                        暂无
                    </li>
                </ul>
            </mt-loadmore>
            <!--显示加载中状态-->
            <div class="loadingBox" v-if="loading">
                <mt-spinner type="snake" class="loading-more"  color="#FF8637"></mt-spinner>
            </div>

            <!-- <noData :showNoData="showNoData" :show="show"></noData> -->
        </div>
        <noMore v-if="noMore" :colorData="noMoreColor"></noMore>

    </div>
</template>

<script  type="text/javascript">
    import pageTitle from '@src/common/pageTitle/pageTitle';
    import noMore from '@src/common/noMore/noMore'
    import noData from '@src/common/newNoData/newNoData';
    export default {
        name: "oldBringsNewChain",
        components: {pageTitle,noMore,noData},
        data(){
            return {
                ruleTitle: '老带新关系链',
                backUrl: '', //传给pageTitle组件，返回上一页的标识
                // newCustomer:['未实名(客户编号 234567)','未实名(客户编号 234567)','未实名(客户编号 234567)','未实名(客户编号 234567)',],
                newCustomer:[],
                oldCustomer:null,
                hasOldRecommend:true, //是否有老客的标识
                noMore:false,
                // showNoData:true,
                // show:true,
                allLoaded: false, //可进行上拉 是否还有更多数据
                pageNum: 1,
                pageSize: 20, //每次加载20条数据
                customerId: null, //客编
                noMoreColor: '#F2F3F5', // 自定义noMore颜色
                bottomDistance: 30, //触发上拉加载的距离值
                clientHeight:null,
                eleOffsetHeight: null,
                loading:false,
                // busy: true,
            };
        },
        created() {
            // this.customerId = this.$route.query.customerId;
            // this.customerId = 622358;
            let deUrl = decodeURI(window.location.href);
            // 客户编号
            if (splitUrl(deUrl)['customerId'] == '--') {
                this.customerId = null;
            } else {
                this.customerId = splitUrl(deUrl)['customerId']
            }
            // this.$parent.changeLoading(false)
            this.getData()
        },
        mounted(){
            // 获取浏览器可视区域高度
            this.clientHeight =   `${document.documentElement.clientHeight}`;
            this.eleOffsetHeight = this.$refs.ele.offsetHeight;
            window.onresize = function temp() {
                this.clientHeight = `${document.documentElement.clientHeight}`;
            };
        },
        methods: {
            getData(){
                let that = this;
                this.$axiosHttp.http({
                    url: apiUrl.getOldBringNewChain,
                    method: 'POST',
                    needFailCallback: true,
                    params: {
                        customerNo: that.customerId,
                        pageNum:that.pageNum,
                        pageSize:20
                    },
                }, (res) => {
                    let data = res.data.data;
                    this.oldCustomer = data.relationPO;
                    // this.newCustomer = data.list?data.list:[];
                    // this.$parent.changeLoading(false)
                    this.loading = false
                    if (that.pageNum >= data.pages) {
                        //当前页码数大于等于总页码数时展示没有更多数据
                        this.newCustomer = this.newCustomer.concat(data.list?data.list:[]);
                        this.needShowNoMore()
                        // this.noMore = true
                    } else {
                        this.newCustomer = this.newCustomer.concat(data.list?data.list:[]);
                    }
                    if(this.newCustomer.length == 0){
                        this.allLoaded = true
                    };

                },res =>{
                    // this.$parent.changeLoading(false)
                    this.loading = false;
                    // 接口失败黑条提示
                    this.$toast(res.data.message)
                },res => {
                    // this.$parent.changeLoading(false);
                    this.loading = false;
                    // 无数据情况
                    this.oldCustomer = null;
                    this.newCustomer = [];
                });
            },
            needShowNoMore(){
                this.noMore = this.eleOffsetHeight > this.clientHeight;
            },
            loadBottom() {//上拉加载
                this.$refs.allLoadMore.onBottomLoaded();
                if(!this.allLoaded){
                    console.log('这里？');
                    this.loading = true
                    // this.$parent.changeLoading(false)
                    this.pageNum+=1;
                    this.getData()
                    //调用接口（pageNum+1）
                }else{
                    console.log('没有更多数据了')
                }
            }

        },
        watch: {
            // 如果 `clientHeight` 发生改变，这个函数就会运行
            eleOffsetHeight: function () {
                this.needShowNoMore()
            }
        },
    }
</script>

<style>

    /*.oldBringsNewChainWrap .listTitle{
        text-indent: 1.2rem;
        height: 2.35rem;
        line-height: 2.35rem;
        color: #545861;
        font-size: .75rem;
        font-weight: 500;
    }
    .oldBringsNewChainWrap .listTitle div{
        background: #FF6500;
        position: relative;
        left: .75rem;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 0.075rem;
        width:0.2rem;
        height:0.6rem;
        float: left;
        
    }*/

    .oldBringsNewChainWrap .listTitle{
        display: flex;
        align-items: center;
        height: 2.35rem;
    }
    .oldBringsNewChainWrap .listTitle .titleName{
        display: inline-block;
        color: #545861;
        margin-left: .25rem;
        font-size: .75rem;
        font-weight: 500;
    }
    .oldBringsNewChainWrap .listTitle .leftPoint{
        display: inline-block;
        background: #FF6500;
        border-radius: 1rem;
        width: 0.2rem;
        height: 0.6rem;
        margin-left: .75rem;
    }
    .oldBringsNewChainWrap .newRegister{
        width: 100%;
        background: #fff;
    }
    .oldBringsNewChainWrap .newRegisterItems{
        height: 3.3rem;
        background: #fff;
        padding: 0 .75rem;
        position: relative;
    }
    .oldBringsNewChainWrap .newRegisterItems .custName{
        position: absolute;
        top: .8rem;
        font-size: .75rem;
        color: #1D212B;
    }
    .oldBringsNewChainWrap .newRegisterItems .custNo{
        position: absolute;
        top: 1.85rem;
        font-size: .65rem;
        color: #91959E;
    }
    .oldBringsNewChainWrap .newRegister>li{
        margin: 0 auto;
        width: 100%;
        align-items: center;
        height: 3.3rem;
        padding: 0 .75rem;
        border-bottom: solid .0125rem #f2f3f5;
        position: relative;
    }
    .oldBringsNewChainWrap .newRegister>li .custName{
        position: absolute;
        top: .8rem;
        font-size: .75rem;
        color: #1D212B;
    }
    .oldBringsNewChainWrap .newRegister>li .custNo{
        position: absolute;
        top: 1.85rem;
        font-size: .65rem;
        color: #91959E;
    }
    .oldBringsNewChainWrap .newRegister>li:last-of-type{
        border-bottom: none;
    }
    .oldBringsNewChainWrap .newRegister .rightWrap .content{
        text-align: right;
    }
    .oldBringsNewChainWrap .newRegister .noData{
        line-height: 3.3rem;
        color: #91959E;
        font-size: .65rem;
        font-weight: 500;
    }
    .oldBringsNewChainWrap .loadingBox{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        
    }

</style>